<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<script src="resource/js/jquery/dnd.js"></script>

<c:choose>
	<c:when test="${user != null}">
		<c:if test="${usertype == 'Admin User'}">
		</c:if>
	</c:when>
	<c:otherwise>
		<jsp:forward page="login.jsp" />
	</c:otherwise>
</c:choose>

<!-- start content -->
<div id="content">
	<div id="page-heading">
		<h1 align="center" style="font-size: 30px; font-weight: bold">View
			Transaction</h1>

	</div>
	<!--  start top-search -->
	<div id="top-search-transaction">

		<form action="searchTransaction.html" method="post">
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td><input type="number" name="idcard" class="top-search-inp"
						placeholder="Id Card Number" required/>&nbsp;</td>
					<td><input type="date" id="startdatepicker" name="fday"
						class="top-search-inp" placeholder="From date">&nbsp;</td>
					<td><input type="date" id="enddatepicker" name="tday"
						class="top-search-inp" placeholder="To date"></td>
					<td><input type="submit" class="btn_search"></input></td>
				</tr>
			</table>
			
		</form>
	</div>
	<div id="message-area" align="center">
							<span style="color: blue; font-weight: bold; font-size: 15px;">${message}</span>
							<span style="color: red">${error}</span>
	</div>
	<!--  end top-search -->
	<!-- end page-heading -->



	<table border="0" width="100%" cellpadding="0" cellspacing="0"
		id="content-table">
		<tr>
			<th rowspan="3" class="sized"><img
				src="resource/images/shared/side_shadowleft.jpg" width="20"
				height="300" alt="" /></th>
			<th class="topleft"></th>
			<td id="tbl-border-top">&nbsp;</td>
			<th class="topright"></th>
			<th rowspan="3" class="sized"><img
				src="resource/images/shared/side_shadowright.jpg" width="20"
				height="300" alt="" /></th>
		</tr>
		<tr>
			<td id="tbl-border-left"></td>
			<td>
				<!--  start content-table-inner ...................................................................... START -->
				<div id="content-table-inner">

					<!--  start table-content  -->
					<div id="table-content">

						<!--  start customer information -->
						<h1 style="padding-bottom: 12px; padding-top: 10%;" align="center">CUSTOMER</h1>
						<form id="mainform1" action="">
							<!-- start customer table -->
							<table border="0" width="100%" cellpadding="0" cellspacing="0"
								id="product-table" class="paging">
								<!-- Display number of info in a page ------------------------------------- START-->
								<thead>
									<tr>
										<th class="table-header-repeat line-left"><a>ACCOUNT
												NUMBER</a></th>
										<th class="table-header-repeat line-left minwidth-1"><a
											href="">ID CARD NUMBER</a></th>
										<th class="table-header-repeat line-left minwidth-1"><a
											href="">CUSTOMER</a></th>
										<th class="table-header-repeat line-left"><a>PHONE</a></th>
										<th class="table-header-repeat line-left"><a>STATUS</a></th>
									</tr>
								</thead>
								<tbody>
									<c:choose>
										<c:when test="${viewAccounts.size() > 0}">
											<c:forEach items="${viewAccounts}" var="acc">
												<tr class="alternate-row">
													<td><a
														href="viewTransactionByAccountId.html?accountId=${acc.accountNumber}">${acc.accountNumber}</a>

													</td>

													<td>${acc.idCardNumber.idCardNumber}</td>
													<td>${acc.idCardNumber.lastName}
														${acc.idCardNumber.midName} ${acc.idCardNumber.firstName}</td>

													<td>${acc.idCardNumber.phoneHome}</td>
													<td>${acc.accountState}</td>
												</tr>
											</c:forEach>

										</c:when>
										<c:otherwise>
											<tr class="alternate-row">
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
											</tr>
										</c:otherwise>
									</c:choose>
								</tbody>
							</table>
							<!--  end customer-table................................... -->
						</form>
						<!-- end customer information -->

						<!--  start Transaction-table ..................................................................................... -->
						<h1 style="padding-bottom: 12px; padding-top: 10%;" align="center">TRANSACTION</h1>
						<div id="message-area" align="center">
							<span style="color: blue; font-weight: bold; font-size: 15px;">${messTrans}</span>
							<span style="color: red">${errorTrans}</span>
						</div>
						<form id="mainform" action="">
							<table border="0" width="100%" cellpadding="0" cellspacing="0"
								id="product-table" class="paging">
								<thead>
									<tr>
										<th class="table-header-repeat line-left"
											style="max-width: 10px"><a>ID</a></th>
										<th class="table-header-repeat line-left minwidth-1"><a>BEGIN</a></th>
										<th class="table-header-repeat line-left minwidth-1"><a>END</a></th>
										<th class="table-header-repeat line-left"><a>TYPE</a></th>
										<th class="table-header-repeat line-left"><a>SENDER</a></th>
										<th class="table-header-repeat line-left"><a>RECEIVER</a></th>
										<th class="table-header-repeat line-left"><a>STATUS</a></th>
										<th class="table-header-repeat line-left"><a>AMOUNT</a></th>
										<th class="table-header-repeat line-left"><a>SUPPORT</a></th>
										<th class="table-header-repeat line-left"><a>ADMIN</a></th>
										<th class="table-header-repeat line-left"><a>COMMENT</a></th>
									</tr>
								</thead>
								<tbody>
									<c:choose>
										<c:when test="${viewTransactions.size() > 0}">
											<c:forEach items="${viewTransactions}" var="tr"
												varStatus="no">
												<tr class="alternate-row">
													<td>${no.count}</td>
													<td>${tr.beginTime}</td>
													<td>${tr.endTime}</td>
													<td>${tr.transactionType}</td>
													<td>${tr.sendAccount.idCardNumber.firstName}</td>
													<td>${tr.receiveAccount.idCardNumber.firstName}</td>
													<td>${tr.transactionStatus}</td>
													<td>${tr.changeAmount}</td>
													<td>${tr.userSupport.userName}</td>
													<td>${tr.userAdmin.userName}</td>
													<td>${tr.comment}</td>
												</tr>
											</c:forEach>

										</c:when>
										<c:otherwise>
											<tr class="alternate-row">
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
											</tr>
										</c:otherwise>
									</c:choose>

								</tbody>
							</table>
							<!--  end Transaction-table................................... -->
						</form>
					</div>
					<div class="clear"></div>

				</div> <!--  end content-table-inner ............................................END  -->
			</td>
			<td id="tbl-border-right"></td>
		</tr>
		<tr>
			<th class="sized bottomleft"></th>
			<td id="tbl-border-bottom">&nbsp;</td>
			<th class="sized bottomright"></th>
		</tr>
	</table>
	<div class="clear">&nbsp;</div>

</div>
<!--  end content -->

